<template>
  <!-- 查看用户详细信息弹框 -->
  <el-dialog 
  :visible.sync="visible" class="detail_wamper"
  title="详细信息" 
  :close-on-click-modal="false" 
  :close-on-press-escape="false"
  :append-to-body="true"
  @close="cancel"
  >
  <el-form class="detailedinfo" label-width="85px" v-if="showMore">
    <el-row>
      <el-col :span="12">
        <el-form-item label="头像：">
          <!-- <span>{{detailList.name}}</span> -->
          <div class="imageDiv">
            <img :src="detailList.photograph" alt="图片加载失败！">
          </div>
        </el-form-item>
        <el-form-item label="姓名：">
          <span>{{detailList.name}}</span>
        </el-form-item>
        <el-form-item label="性别：">
          <span>{{detailList.gender}}</span>
        </el-form-item>
        <el-form-item label="民族：">
          <span>{{detailList.nationality}}</span>
        </el-form-item>
        <el-form-item label="出生日期：">
          <span>{{detailList.birth}}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="所属学院：">
          <span>{{detailList.academyName}}</span>
        </el-form-item>
        <el-form-item label="电话号码：">
          <span>{{detailList.phoneNumber}}</span>
        </el-form-item>
        <el-form-item label="专业：">
          <span>{{detailList.majorName}}</span>
        </el-form-item>
        <el-form-item label="班级：">
          <span>{{detailList.className}}</span>
        </el-form-item>
        <el-form-item label="发展阶段：">
          <span>{{detailList.politics}}</span>
        </el-form-item>
        <el-form-item label="籍贯：">
          <span>{{detailList.censusAddress}}</span>
        </el-form-item>
        <el-form-item label="现在居住地：" label-width="98px">
          <span>{{detailList.residentialAddress}}</span>
        </el-form-item>
      </el-col>
    </el-row>
    <h3>当前入党进度</h3>
    <!-- <el-progress :percentage="68" :format="format"></el-progress> -->
    <el-steps :space="200" :active="step" finish-status="success">
      <el-step title="团员推优"></el-step>
      <el-step title="入党积极分子"></el-step>
      <el-step title="发展对象"></el-step>
      <el-step title="预备党员"></el-step>
      <el-step title="正式党员"></el-step>
    </el-steps>
  </el-form>
  <el-form  class="detailedinfo" label-width="85px" v-else>
    <el-row>
      <el-col :span="12">
        <el-form-item label="头像：">
          <div class="modify_head">
            <el-upload class="uploadBorder" v-if="showmodify" action="#"
            :on-change="uploadImg"
            ref="headerImg"
            :show-file-list="false"
            accept=".jpg,.JPG"
            :before-upload="beforeAvatarUpload"
            list-type="picture-card" :auto-upload="false" >
              <img v-if="dialogImageUrl" :src="dialogImageUrl" class="avatar" />
              <i v-else slot="default" class="el-icon-plus"></i>
            </el-upload>
            <img v-else @click="modifyImg" title="点击修改头像" :src="detailList.photograph" alt="图片加载失败！">
            
          </div>
        </el-form-item>
        <el-form-item label="姓名：">
          <span>{{modifydetailList.name}}</span>
          <!-- <el-input v-model="detailList.name"></el-input> -->
        </el-form-item>
        <el-form-item label="性别：">
          <el-input v-model="modifydetailList.gender"></el-input>
        </el-form-item>
        <el-form-item label="民族：">
          <el-input v-model="modifydetailList.nationality"></el-input>
        </el-form-item>
        <el-form-item label="籍贯：">
          <!-- <span>{{detailList.censusAddress}}</span> -->
          <el-input v-model="modifydetailList.censusAddress"></el-input>
        </el-form-item>
        <el-form-item label="发展阶段：">
          <span>{{modifydetailList.politics}}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="所属学院：">
          <el-select v-model="modifydetailList.academyId" clearable :placeholder="detailList.academyName">
            <el-option
              v-for="item in academyList"
              :key="item.id"
              :label="item.academyName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="电话号码：">
          <!-- <span>{{detailList.phoneNumber}}</span> -->
          <el-input v-model="modifydetailList.phoneNumber"></el-input>
        </el-form-item>
        <el-form-item label="专业：">
          <!-- <span>{{detailList.majorName}}</span> -->
          <!-- <el-input v-model="detailList.majorName"></el-input> -->
          <el-select v-model="modifydetailList.majorId" clearable :placeholder="detailList.majorName">
            <el-option
              v-for="item in majorList"
              :key="item.id"
              :label="item.majorName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="班级：">
          <!-- <span>{{detailList.className}}</span> -->
          <!-- <el-input v-model="detailList.className"></el-input> -->
          <el-select v-model="modifydetailList.classId" clearable :placeholder="detailList.className">
            <el-option
              v-for="item in classList"
              :key="item.id"
              :label="item.className"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出生日期：">
          <!-- <span>{{detailList.birth}}</span> -->
          <el-input v-model="modifydetailList.birth"></el-input>
        </el-form-item>
        <el-form-item label="现居住地：">
          <el-input v-model="modifydetailList.residentialAddress"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <h3>当前入党进度</h3>
    <!-- <el-progress :percentage="45" :format="format"></el-progress> -->
    <el-steps :space="200" :active="step" finish-status="success">
      <el-step title="团员推优"></el-step>
      <el-step title="入党积极分子"></el-step>
      <el-step title="发展对象"></el-step>
      <el-step title="预备党员"></el-step>
      <el-step title="正式党员"></el-step>
    </el-steps>
  </el-form>
  <div class="detail_btn">
    <el-button @click="cancel">关闭</el-button>
    <div class="btn_show" v-show="userlointail==1">
      <el-button v-if="showImport" type="primary" @click="Improve">修改信息</el-button>
      <el-button v-else type="primary" @click="submitModify">提交</el-button>
    </div>
  </div>
  </el-dialog>
</template>

<script>
import transfer from '../../../assets/js/transfer.js';
export default {
    props:{
        userId:{},//用户id
    },
    data(){
        return{
            visible:false,//是否打开弹框
            detailList:"",//用户信息列表
            showMore:true,//控制是否显示输入框
            showImport:true,//控制完善信息和提交按钮的显示
            userlointail:"",//点击打开弹框时的状态
            showmodify:false,//是否显示修改头像
            dialogImageUrl: '',//修改头像地址
            dialogVisible:false,
            disabled: false,
            fileImg:"",//上传的照片的信息
            academyList:[],//学院列表信息
            classList:[],//班级列表
            organizationList:[],//党组织列表
            majorList:[],//专业列表
            step:0,//步骤条
            modifydetailList:""
        }
    },
    mounted(){
    },
    methods:{
        init (id,token){
          // id:进入状态，1：显示编辑资料，0：不显示编辑;token:用户id
          // console.log(id,token)
            this.visible = true
            this.$nextTick(() => {
            })
            this.userinfoList(id,token)
            this.userlointail = id
            this.axios({//学院列表
              headers:{ 'Authentication':localStorage.getItem('token')},
              method:"get",
              // url:"api/academy/getAcademyList",
              url:"/academy/getAcademyList",
            }).then(res=>{
              if(res.data.code != 20001){
                return this.$message.error(res.data.msg)
              }
              this.academyList = res.data.data
            })
            // 查询班级列表/class/getClassList
          this.axios({
            headers:{ 'Authentication':localStorage.getItem('token')},
            method:"get",
            // url:"api/class/getClassList",
            url:"/class/getClassList",
          }).then(res=>{
            if(res.data.code != 20001){
              return this.$message.error(res.data.msg)
            }
            this.classList = res.data.data
          })
          // 查询党组织列表
          this.axios({
            headers:{ 'Authentication':localStorage.getItem('token')},
            method:"get",
            // url:"api/organization/getOrganizationList",
            url:"/organization/getOrganizationList",
          }).then(res=>{
            if(res.data.code != 20001){
              return this.$message.error(res.data.msg)
            }
            this.organizationList = res.data.data
          })
          // 查询专业列表
          this.axios({
            headers:{ 'Authentication':localStorage.getItem('token')},
            method:"get",
            // url:"api/major/getMajorList",
            url:"/major/getMajorList",
          }).then(res=>{
            if(res.data.code != 20001){
              return this.$message.error(res.data.msg)
            }
            this.majorList = res.data.data
          })
        },
        userinfoList(id,e){
          // id:进入状态 e:用户token
          // console.log(id)
          // console.log(e)
          if(id==1){
            this.axios({
              headers:{'Authentication':localStorage.getItem('token')},
              method:"get",
              url:`/user/getCurrentUserInfo`,
            }).then(res=>{
              // console.log( res)
              if(res.data.code != 20001){
                return this.$message.error(res.data.msg)
              }
              this.detailList = res.data.data
              // console.log(this.detailList.politics)
              if(this.detailList.politics=="团员"){
                this.step = 1
              }
              else if(this.detailList.politics=="入党积极分子"){
                this.step = 2
              }else if(this.detailList.politics=="发展对象"){
                this.step = 3
              }else if(this.detailList.politics=="预备党员"){
                this.step = 4
              }else if(this.detailList.politics=="党员"){
                this.step = 5
              }
            })
          }
          else{
            this.axios({
              headers:{'Authentication':localStorage.getItem('token')},
              method:"get",
              url:`/user/getUserDetailInfo?用户id=${e}`,
            }).then(res=>{
              // console.log( res)
              if(res.data.code != 20001){
                return this.$message.error(res.data.msg)
              }
              this.detailList = res.data.data
              // console.log(this.detailList.politics)
              if(this.detailList.politics=="团员"){
                this.step = 1
              }
              else if(this.detailList.politics=="入党积极分子"){
                this.step = 2
              }else if(this.detailList.politics=="发展对象"){
                this.step = 3
              }else if(this.detailList.politics=="预备党员"){
                this.step = 4
              }else if(this.detailList.politics=="党员"){
                this.step = 5
              }
            })
          }
        },
        cancel(){
          this.detailList = {}
          this.visible = false
          this.showMore = true
          this.showImport = true
          this.showmodify = false
          if(this.dialogImageUrl){
            this.$refs.headerImg.clearFiles()//清空之前选择的头像
          }
          this.dialogImageUrl = ""
        },
        // closeDialog(){},
        Improve(){//点击完善信息按钮
          this.modifydetailList = this.detailList
          // console.log(this.modifydetailList)
          this.showMore = false
          this.showImport = false
        },
        modifyImg(){//修改头像
          this.showmodify = true
        },
      uploadImg(file,fileList){
        // console.log("执行")
        // console.log(file)
        this.dialogImageUrl = file.url
        this.fileImg = file
      },
      beforeAvatarUpload(file){//上传头像之前判断图片格式
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      submitModify(){//提交按钮
        if(this.fileImg){
          let fileData = new FormData()
          fileData.append("newPhotograph",this.fileImg.raw)
          // console.log(this.fileImg.raw)
          this.axios({//修改头像
            headers:{'Authentication':localStorage.getItem('token')},
            method:"put",
            // url:"api/user/updatePhotograph",
            url:"/user/updatePhotograph",
            data:fileData
          }).then(res=>{
            if(res.data.code != 20001){
              return this.$message.error(res.data.msg)
            }
            // console.log(res)
            this.headSculpture = res.data.data
            this.$emit('person')
            // this.$emit('personinfo')
          })
        }
        // console.log(this.modifydetailList)
        // 转换学院、班级、和专业
        if(this.modifydetailList.academyId == undefined){//学院id
          this.academyList.forEach(item=>{
            if(this.modifydetailList.academyName==item.academyName){
              this.modifydetailList.academyId = item.id
            }
          })
        }
        // console.log(this.majorList)
        if(this.modifydetailList.majorId == undefined){//专业id
          this.majorList.forEach(item=>{
            if(this.modifydetailList.majorName==item.majorName){
              this.modifydetailList.majorId = item.id
            }
          })
        }
        if(this.modifydetailList.classId == undefined){//班级id
          this.classList.forEach(item=>{
            if(this.modifydetailList.className==item.className){
              this.modifydetailList.classId = item.id
            }
          })
        }
        this.axios({
          headers:{'Authentication':localStorage.getItem('token')},
          method:"post",
          url:"/user/updateUser",
          data:this.modifydetailList
        }).then(res=>{
          // console.log(res)
          if(res.data.code != 20001){
            return this.$message.error(res.data.msg)
          }
        })
        this.$alert('修改信息成功', {
          confirmButtonText: '确定',
          callback: action => {
            this.visible = false
            // console.log("执行到这")
            transfer.$emit('personinfo');
          }
        });
      }
    }
}
</script>

<style lang="scss">
.detailedinfo{
  // border: 1px solid #000;
  height: 53vh;
  overflow: auto;
}
  .el-progress{
    // width: 60%;
    .el-progress-bar{
      width: 90%;
    }
  }
  .detail_btn{
    margin-top: 2vh;
    padding-bottom: 2vh;
  }
  .btn_show{
    display: inline;
    margin-left: 2vw;
  }
  .imageDiv{
    width: 100px;
    // height: 150px;
    // border: 1px solid #000;
    img{
      width: 100%;
    }
  }
  .modify_head{//修改头像
    cursor: pointer;
    width: 100px;
    // height: 150px;
    // border: 1px solid #000;
    img{
      width: 100%;
    }
    .uploadBorder{
      width: 80px;
    }
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    // width: 178px;
    // height: 178px;
    // line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 145px;
    // height: 145px;
    display: block;
    // border: 1px solid #000;
  }
</style>